<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- <link rel="stylesheet" href="/febs/vue/element-ui-index.css"> -->
    <link rel="stylesheet" href="/febs/vue/vxe-table-style.css">
    <script src="/febs/vue/vue.js"></script>
    <script src="/febs/vue/axios.min.js"></script>
    <!-- <script src="/febs/vue/element-ui-index.js"></script> -->
    <script src="/febs/vue/xe-utils.js"></script>
    <script src="/febs/vue/vxe-table.js"></script>
    <script src="/febs/vue/jquery.js"></script>
</head>

<body>
<div id="app" class="layui-fluid w-app">

    <vxe-table border show-header-overflow highlight-hover-row resizable :align="allAlign" :data="tableData" max-height="600">
        <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
        <vxe-table-column field="vendNm" title="厂商" min-width="120"></vxe-table-column>
        <vxe-table-column field="itemNo" min-width="120" title="材料编码"></vxe-table-column>
        <vxe-table-column field="itemTname" title="材料名称" min-width="260"></vxe-table-column>
        <vxe-table-column field="seId" min-width="100" title="订单号码"></vxe-table-column>
        <vxe-table-column field="seSeq" min-width="50" title="-序"></vxe-table-column>
        <vxe-table-column field="prodNo" min-width="100" title="型号"></vxe-table-column>
        <vxe-table-column field="seQty" min-width="80" title="订单双数"></vxe-table-column>
        <vxe-table-column field="needQty" min-width="80" title="需求数量"></vxe-table-column>
        <vxe-table-column field="countPurQty" min-width="80" title="累计采购"></vxe-table-column>
        <vxe-table-column field="ordQty" min-width="80" title="采购数量"></vxe-table-column>
        <vxe-table-column field="chkQty" min-width="80" title="验收采购"></vxe-table-column>
        <vxe-table-column field="moreQTY" min-width="80" title="多购数量" type="html" :formatter="formatMoreQTY"></vxe-table-column>
        <vxe-table-column field="purUnit" min-width="80" title="采购单位"></vxe-table-column>
    </vxe-table>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                allAlign: null,
                tableData: []
            }
        },
        created() {
            axios.get('/approvals/detail', {
                params: {
                    orderNo: JSON.parse(sessionStorage.parameterData).orderNo,
                    orgId: JSON.parse(sessionStorage.parameterData).orgId
                }
            })
                .then(response => {
                console.log(response);
            this.tableData = response.data.data
            let wheight = (this.tableData.length ? this.tableData.length + 2 : this.tableData.length + 3) * 48 + 20
            $(".layui-layer").css("top", ($(window).height() - wheight) / 2)
        })
        .catch(error => {
                console.log(error);
        })
        },
        methods: {
            formatMoreQTY({ cellValue }) {
                if(cellValue > 0) {
                    return `<span  style="color: #fa541c;">${cellValue}</span>`
                }
                else {
                    return `<span>${cellValue}</span>`
                }
            },
        }
    })
</script>

<style>
    .w-app {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        font-size: 14px;
        padding: 0px 15px 15px 15px;
        background: #ffffff !important;
    }

    .text-center {
        text-align: center;
    }

    .text-left {
        text-align: left;
    }

    th,
    td {
        padding: 4px 4px;
    }

    .main-table,
    .main-table th,
    .main-table td {
        border-collapse: collapse;
        border: 1px solid #000;
    }

    .total>td {
        padding: 6px 4px;
    }

    .horizontal-sign {
        margin-top: 30px;
    }

    .sign {
        border-bottom: 1px solid #000;
        width: 200px;
    }

    .text-16px {
        font-size: 16px;
    }
</style>

</html>